<template>
	<div>
		<el-row :span="24" style="margin:26px 0;">
			<el-button @click="goBack()" type="primary">返回</el-button>
		</el-row>
		<div>
			<div class="editUserInfo">
				<div style="align-self: center;margin-right: 100px;">
					<span @click="selectAddress()">用户名:</span>
					<span style="color: blue;">{{form.name}}</span>
				</div>
				<div style="align-self: center;margin-right: 100px;">
					<span>用户名ID:</span>
					<span>{{form.partnerUserId}}</span>
				</div>
				<div style="align-self: center;margin-right: 100px;">
					<span>商户ID:</span>
					<span>{{form.storeId}}</span>
				</div>
				<div style="margin-right: 100px;">
					<span>认证类型:</span>
					<!-- <span v-if="form.merChantType === 'G'">个体商户</span>
					<span v-if="form.merChantType === 'M'">企业商户</span> -->
					<span>创客认证</span>

				</div>
				<div style="align-self: center;margin-right: 100px;">
					<span>认证状态:</span>
					<span v-if="form.openingStatus === 'B'">审核中</span>
					<span v-if="form.openingStatus === 'L'">平台拒绝</span>
					<span v-if="form.openingStatus === 'P'">平台通过</span>
					<span v-if="form.openingStatus === 'F'">快捷通拒绝</span>
					<span v-if="form.openingStatus === 'S'">通过</span>
					<!-- <span>{{stateList[form.actStat].text}}</span> -->
				</div>
				<div  v-if="form.openingStatus === 'S'" style="align-self: center;">
					<span>快捷通商户ID:</span>
					<span>{{form.identityId}}</span>
					<!-- <span>{{stateList[form.actStat].text}}</span> -->
				</div>
			</div>
			<br>
			<div style="border: 1px solid #DCDCDC;">
				<div style="background: #f5f4f5;padding: 20px;margin-bottom: 20px;">
					实名认证
				</div>
				<el-form :inline="true" :rules="rules" :model="form" class="demo-form-inline">
					<el-form-item label-width="130px" label="姓名：">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="身份证号：">
						<el-input v-model="form.certificatesNumber"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="身份证有效期：">
						<el-date-picker v-model="form.certificatesValidity" value-format="yyyy-MM-dd" type="date" @change="getSTime"
						 placeholder="选择日期">
						</el-date-picker>
						<!-- <el-checkbox @change="changeChecked" style="margin-left: 10px;" v-model="radioTime">长期</el-checkbox> -->
					</el-form-item>
					<br>
					<el-form-item label-width="130px" label="联系人手机号：">
						<el-input v-model="form.phoneNum"></el-input>
					</el-form-item>
					<el-form-item prop="email" label-width="130px" label="联系人邮箱：">
						<el-input type="email" v-model="form.email"></el-input>
					</el-form-item>
					<br>
					<el-form-item label-width="130px" label="个人所在地：">
						<el-cascader style="width: 530px;" v-model="value" :props="optionProps" :options="optionsAddress" ref="cascaderAddr"></el-cascader>
						<!-- 	<el-button type="primary" @click="selectAddress()" v-if="form.actStat==3">重新选取地址</el-button> -->
					</el-form-item>
					<el-form-item label-width="130px" label="个人所在地址：">
						<el-input style="width: 530px;" v-model="form.address"></el-input>
						<!-- <el-button type="primary" @click="selectAddress()" v-if="form.actStat==3">重新选取地址</el-button> -->
					</el-form-item>
				</el-form>
			</div>
			<br>
			<div style="border: 1px solid #DCDCDC;">
				<div style="background: #f5f4f5;padding: 20px;margin-bottom: 20px;">
					银行卡信息
				</div>
				<el-form :inline="true" :model="form" class="demo-form-inline">
					<el-form-item label-width="130px" label="银行卡户名：">
						<el-input v-model="form.bankAccountName"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="结算银行卡：">
						<el-input v-model="form.bankCardNo"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="开户行：">
						<el-select style="width: 192px;" v-model="form.bankName" placeholder="请选择" @change="changeSelect">
							<el-option v-for="item in cardNameList" :key="item.name" :label="item.name" :value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<br>
					<el-form-item label-width="130px" label="开户行地区：">
						<el-cascader style="width: 530px;" v-model="valueBank" :options="optionsBankAddress" ref="cascaderAddr"></el-cascader>
					</el-form-item>
					<el-form-item label-width="130px" label="开户支行名称：">
						<el-input style="width: 530px;" v-model="form.bankBranchName"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<br>
			<div style="border: 1px solid #DCDCDC;">
				<div style="background: #f5f4f5;padding: 20px;margin-bottom: 20px;">
					影印件信息
				</div>
				<el-form :inline="true" :model="form" class="demo-form-inline">
					<el-form-item label-width="150px">
						<div style="width: 200px;text-align: center;">
							<p>法人身份证正面:</p>
							<div style="display: inline-block;text-align: center">
								<we-ui-uploads :images="form.certificatesFront" :maxCount="1" :maxSize="1024*1024" @uploading="uploading4"></we-ui-uploads>
							</div>
						</div>
					</el-form-item>
					<el-form-item label-width="150px">
						<div style="width: 200px;text-align: center;">
							<p>法人身份证反面:</p>
							<div style="display: inline-block;text-align: center">
								<we-ui-uploads :images="form.certificatesBack" :maxCount="1" :maxSize="1024*1024" @uploading="uploading5"></we-ui-uploads>
							</div>
						</div>
					</el-form-item>
					<!-- <el-form-item>
						<div style="width: 200px;text-align: center;">
							<p>手持身份证正面:</p>
							<div style="display: inline-block;text-align: center">
								<we-ui-uploads :images="form.certificatesInHandFront" :maxCount="1" :maxSize="1024*1024" @uploading="uploading7"></we-ui-uploads>
							</div>
						</div>
					</el-form-item> -->
					<!-- <el-form-item>
						<div style="width: 200px;text-align: center;">
							<p>手持银行卡正面:</p>
							<div style="display: inline-block;text-align: center">
								<we-ui-uploads :images="form.bankCardInHand" :maxCount="1" :maxSize="1024*1024" @uploading="uploading10"></we-ui-uploads>
							</div>
						</div>
					</el-form-item> -->
					<el-form-item>
						<div style="width: 200px;text-align: center;">
							<p>银行卡包含卡号一面:</p>
							<div style="display: inline-block;text-align: center">
								<we-ui-uploads :images="form.bankCardFont" :maxCount="1" :maxSize="1024*1024" @uploading="uploading7"></we-ui-uploads>
							</div>
						</div>
					</el-form-item>
				</el-form>
				<div style="display: flex;justify-content: space-between;padding: 30px 70px;border-top: 1px solid #DCDCDC;">
					<div>
						<el-button @click="submitForm" type="primary">确定修改信息</el-button>
					</div>

					<div v-if="form.openingStatus != 'S'">
						<el-button type="success" @click="agree">同意</el-button>
						<!-- <el-button  type="infor" @click="reloadSubmit">重新提交</el-button> -->
						<el-button type="danger" :loading="loading" @click="dialogVisible=true;">拒绝</el-button>
					</div>
				</div>
			</div>
			<el-dialog title="拒绝理由" v-model="dialogVisible" size="tiny" style="min-width: 400px">
				<el-form label-width="110px">
					<el-form-item label="拒绝理由：">
						<el-input v-model="refuseReason" class="length_150"></el-input>
					</el-form-item>
				</el-form>
				<div style="text-align: center">
					<el-button type="primary" @click="submit" :disabled="!refuseReason" :loading="loading">保 存
					</el-button>
				</div>

			</el-dialog>
		</div>
	</div>
</template>

<script>
	import newAddress from '../newAddress.js'
	import address from '../../address.js'
	import IdentityCodeValid from '../../cardVerify.js'
	export default {
		data() {
			return {
				form: {
					storeId: '',
					storeName: '',
					storePhone: '',
					storeAddress: '',
					businessTime: '',
					businessClass: '',
					businessSubclass: '',
					introduction: '',
					businessLicense: '',
					storegList: [],
					storeImg: [],
					storeRebate: '',
					idcardFront: [],
					idcardBack: [],
					accountLicense: [],
					organizationNumber: [],
					tax: [],
					specialInDustry: [],
					bankProvince: '',
					companyOrPerson: '',
					appData: '',
					businessLicenseValidity: '',
					personPhoto: ''
				},
				refuseReason: '',
				dialogVisible: false,
				cardNameList: [{
						"name": "农业银行",
						"code": "ABC"
					},
					{
						"name": "中国银行",
						"code": "BOC"
					},
					{
						"name": "建设银行",
						"code": "CCB"
					},
					{
						"name": "工商银行",
						"code": "ICBC"
					},
					{
						"name": "交通银行",
						"code": "COMM"
					},
					{
						"name": "中信银行",
						"code": "CITIC"
					},
					{
						"name": "光大银行",
						"code": "CEB"
					},
					{
						"name": "华夏银行",
						"code": "HXB"
					},
					{
						"name": "民生银行",
						"code": "CMBC"
					},
					{
						"name": "广东发展银行",
						"code": "GDB"
					},
					{
						"name": "平安银行",
						"code": "SZPAB"
					},
					{
						"name": "招商银行",
						"code": "CMB"
					},
					{
						"name": "兴业银行",
						"code": "CIB"
					},
					{
						"name": "浦东发展银行",
						"code": "SPDB"
					},
					{
						"name": "南京银行",
						"code": "NJCB"
					},
					{
						"name": "宁波银行",
						"code": "NBCB"
					},
					{
						"name": "汉口银行",
						"code": "HKBCHINA"
					},
					{
						"name": "杭州银行",
						"code": "HCCB"
					},
					{
						"name": "广州市商业银行",
						"code": "GZCB"
					},
					{
						"name": "浙江稠州商业银行",
						"code": "CZCB"
					},
					{
						"name": "长沙银行",
						"code": "CSCB"
					},
					{
						"name": "城市商业银行",
						"code": "CITYBANK"
					},
					{
						"name": "上海银行",
						"code": "BOS"
					},
					{
						"name": "北京银行",
						"code": "BCCB"
					},
					{
						"name": "晋城市商业银行",
						"code": "SXJS"
					},
					{
						"name": "温州市商业银行",
						"code": "WZCB"
					},
					{
						"name": "广州市农信社",
						"code": "GNXS"
					},
					{
						"name": "农村商业银行",
						"code": "RCB"
					},
					{
						"name": "顺德农信社",
						"code": "SDE"
					},
					{
						"name": "恒丰银行",
						"code": "EGBANK"
					},
					{
						"name": "浙商银行",
						"code": "CZB"
					},
					{
						"name": "农村合作银行",
						"code": "URCB"
					},
					{
						"name": "渤海银行",
						"code": "CBHB"
					},
					{
						"name": "徽商银行",
						"code": "HSBANK"
					},
					{
						"name": "村镇银行",
						"code": "COUNTYBANK"
					},
					{
						"name": "重庆三峡银行",
						"code": "CCQTGB"
					},
					{
						"name": "上海农村商业银行",
						"code": "SHRCB"
					},
					{
						"name": "城市信用合作社",
						"code": "UCC"
					},
					{
						"name": "北京农商行",
						"code": "BJRCB"
					},
					{
						"name": "珠海市农村信用合作社",
						"code": "ZHNX"
					},
					{
						"name": "尧都信用合作联社",
						"code": "YDXH"
					},
					{
						"name": "深圳农村商业银行",
						"code": "SNXS"
					},
					{
						"name": "农村信用合作社",
						"code": "RCC"
					},
					{
						"name": "湖南农信社",
						"code": "HNNXS"
					},
					{
						"name": "中国邮储银行",
						"code": "PSBC"
					},
					{
						"name": "浙江省农村信用社联合社",
						"code": "ZJRC"
					},
					{
						"name": "河南农村信用社",
						"code": "HNNX"
					},
					{
						"name": "江苏农村信用社联合社",
						"code": "JSNX"
					},
					{
						"name": "吉林省农村信用社",
						"code": "JLNLS"
					},
					{
						"name": "河北省农村信用社",
						"code": "HEBNX"
					},
					{
						"name": "内蒙古农村信用社",
						"code": "NMGNXS"
					},
					{
						"name": "辽宁省农村信用社",
						"code": "LNRCC"
					},
					{
						"name": "云南省农村信用社",
						"code": "YNRCC"
					},
					{
						"name": "湖北农村信用社",
						"code": "HBXH"
					},
					{
						"name": "广东农村信用社",
						"code": "GDRC"
					},
					{
						"name": "海南省农村信用社",
						"code": "HNB"
					},
					{
						"name": "山西农村信用社",
						"code": "SXRCU"
					},
					{
						"name": "安徽农村信用社联合社",
						"code": "AHRCU"
					},
					{
						"name": "山东省农村信用社",
						"code": "SDNXS"
					},
					{
						"name": "四川农村信用社",
						"code": "SCRCU"
					},
					{
						"name": "广西农村信用社",
						"code": "GXNXS"
					},
					{
						"name": "陕西农村信用社",
						"code": "SXNXS"
					},
					{
						"name": "福建农村信用社",
						"code": "FJNX"
					},
					{
						"name": "江西农村信用社",
						"code": "JXNXS"
					},
					{
						"name": "贵州农信社",
						"code": "GZRCU"
					},
					{
						"name": "黑龙江农村信用社",
						"code": "HLJRCC"
					},
					{
						"name": "新疆农信社",
						"code": "XJRCCB"
					},
					{
						"name": "青海农信社",
						"code": "QHRCCB"
					},
					{
						"name": "甘肃省农村信用社",
						"code": "GSRCU"
					},
					{
						"name": "浙江民泰商业银行",
						"code": "MTB"
					},
					{
						"name": "哈尔滨银行",
						"code": "HRBCB"
					},
					{
						"name": "中原银行",
						"code": "ZYB"
					},
					{
						"name": "贵阳银行",
						"code": "GYB"
					},
					{
						"name": "郑州银行",
						"code": "ZZBANK"
					},
					{
						"name": "成都银行",
						"code": "BOCD"
					},
					{
						"name": "重庆银行",
						"code": "CQCBANK"
					},
					{
						"name": "青岛银行",
						"code": "QDB"
					},
				],
				radioTime: false,
				businessValidityTime: false,
				oldbusinessLicenseValidity: '',
				oldcertificatesValidity: '',
				table_loading: false,
				loading: false,
				formInline: {
					userName: '',
					userId: '',
					userNum: '',
					userStat: '',
					sort: 'CRE_TIME',
					desc: 'DESC',
					pageNum: 1,
					pageSize: 10
				},
				pageInfo: {
					pageNum: 1,
					pageSize: 10,
					count: 1,
					dtos: []
				},
				formActStatList: [{
						value: 'B',
						label: '审核中'
					},
					{
						value: 'L',
						label: '平台拒绝'
					},
					{
						value: 'P',
						label: '平台通过'
					},
					{
						value: 'F',
						label: '快捷通拒绝'
					},
					{
						value: 'S',
						label: '通过'
					}
				],
				optionProps: {
					label: 'name',
					value: 'cityCode',
					children: 'childList'
				},
				optionBankProps: {
					label: 'label',
					value: 'value',
					children: 'children'
				},
				optionsAddress: newAddress(),
				optionsBankAddress: address(),
				value: ['110000', '110100', '110101'],
				valueBank: ['110000', '110100'],
				rules: {
					email: [{
							required: false,
							message: '请输入邮箱地址',
							trigger: 'blur'
						},
						{
							pattern:/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g,
							message: '请输入正确的邮箱地址',
							trigger: 'blur'
						}
					]

				}
			}
		},
		created() {

		},
		activated() {
			this.fetchData();
		},
		methods: {
			goBack(){
				this.$router.push({path:"/user/creator_detail/",query:{id:this.$route.params.id}})
				// this.$router.push('/user/creator_detail/' +$route.query.id)
			},
			getSTime(val) {
				this.form.certificatesValidity = val
			},
			changeChecked() {
				if (this.radioTime) {
					this.form.certificatesValidity = '2999-01-01'
				} else {
					this.form.certificatesValidity = this.oldcertificatesValidity
				}
			},
			fetchData() {
				let rid = this.$route.params.id
				this.table_loading = true;
				this.dataApi.ajax('markerWithdrawInfo', {
					userId: rid
				}, res => {
					this.table_loading = false;
					if (res.responseType === 'S') {
						if (res.certificatesValidity == '长期有效' || res.certificatesValidity == '2999-01-01') {
							res.certificatesValidity = '2999-01-01'
							this.radioTime = true
						}
						this.form = res
						// 身份证正面
						if (this.form.certificatesFront != '') {
							let certificatesFrontstr = this.form.certificatesFront
							let certificatesFrontarr = certificatesFrontstr.split(',')
							this.form.certificatesFront = certificatesFrontarr
						} else {
							this.form.certificatesFront = []
						}
						// 身份证反面
						if (this.form.certificatesBack != '') {
							let certificatesBackstr = this.form.certificatesBack
							let certificatesBackarr = certificatesBackstr.split(',')
							this.form.certificatesBack = certificatesBackarr
						} else {
							this.form.certificatesBack = []
						}
						// 手持银行卡正面
						if (this.form.bankCardInHand != '') {
							let bankCardInHandstr = this.form.bankCardInHand
							let bankCardInHandarr = bankCardInHandstr.split(',')
							this.form.bankCardInHand = bankCardInHandarr
						} else {
							this.form.bankCardInHand = []
						}
						// 手持身份证正面
						if (this.form.certificatesInHandFront != '') {
							let certificatesInHandFrontstr = this.form.certificatesInHandFront
							let certificatesInHandFrontarr = certificatesInHandFrontstr.split(',')
							this.form.certificatesInHandFront = certificatesInHandFrontarr
						} else {
							this.form.certificatesInHandFront = []
						}
						// 银行卡正面
						if (this.form.bankCardFont != '') {
							let bankCardFontstr = this.form.bankCardFont
							let bankCardFontarr = bankCardFontstr.split(',')
							this.form.bankCardFont = bankCardFontarr
						} else {
							this.form.bankCardFont = []
						}
						this.oldbusinessLicenseValidity = this.form.businessLicenseValidity
						this.oldcertificatesValidity = this.form.certificatesValidity
						this.getAddressCode()
						console.log(this.form, '创客认证详情信息')
					}
				});
			},
			getAddressCode() {
				var vm = this
				let arrAddress = []
				let bankAddress = []
				vm.optionsAddress.forEach(item => {
					if (item.name === vm.form.province) {
						arrAddress[0] = item.cityCode
						item.childList.forEach(ite => {
							if (ite.name == vm.form.city) {
								arrAddress[1] = ite.cityCode
								ite.childList.forEach(iteZone => {
									if (iteZone.name == vm.form.area)
										arrAddress[2] = iteZone.cityCode
									vm.value = arrAddress
								})
							}
						})
					}
				})
				vm.optionsBankAddress.forEach(item => {
					if (item.label === vm.form.bankProv) {
						bankAddress[0] = item.value
						item.children.forEach(ite => {
							if (ite.label == vm.form.bankCity) {
								bankAddress[1] = ite.value
								vm.valueBank = bankAddress
							}
						})
					}
				})

			},
			handleChangeZone(e) {
				let str = this.$refs['cascaderAddr'].currentLabels.toString()
				str = str.replace(/,/g, "")
				this.form.banProv = str
				console.log(this.form.banProv)
			},
			// 开户行选择
			changeSelect(e) {
				console.log(e)
				this.cardNameList.forEach(item => {
					if (item.name == e) {
						this.form.headBankCode = item.code
					}
				})
			},
			uploading4(f) {

				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});

			},
			uploading5(f) {

				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});

			},
			uploading6(f) {

				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});

			},
			uploading7(f) {

				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});

			},
			uploading10(f) {

				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});
			},
			submitForm() {
				var verifyResult = IdentityCodeValid(this.form.certificatesNumber)
				if (!verifyResult) {
					this.showMsg('身份证格式错误', 'warning')
					return false;
				}
				if (this.form.certificatesFront.length == 0) {
					this.showMsg('请上传法人身份证正面图片', 'warning')
					return false;
				}
				if (this.form.certificatesBack.length == 0) {
					this.showMsg('请上传法人身份证反面图片', 'warning')
					return false;
				}
				// if (this.form.certificatesInHandFront.length == 0) {
				// 	this.showMsg('请上传手持身份证正面图片', 'warning')
				// 	return false;
				// }
				// if (this.form.bankCardInHand.length == 0) {
				// 	this.showMsg('请上传手持银行卡图片', 'warning')
				// 	return false;
				// }
				if (this.form.bankCardFont.length == 0) {
					this.showMsg('请上传银行卡正面图片', 'warning')
					return false;
				}


				let data = generateObj(this.form)
				var arr = data.certificatesFront
				var str = arr.join(',');
				data.certificatesFront = str
				var arr1 = data.certificatesBack
				var str1 = arr1.join(',');
				data.certificatesBack = str1
				var arr2 = data.certificatesInHandFront
				var str2 = arr2.join(',');
				data.certificatesInHandFront = str2

				var arr3 = data.bankCardInHand
				var str3 = arr3.join(',');
				data.bankCardInHand = str3

				var arr4 = data.bankCardFont
				var str4 = arr4.join(',');
				data.bankCardFont = str4

				this.optionsAddress.forEach(item => {
					if (item.value === this.value[0]) {
						data.province = item.label
						item.childList.forEach(ite => {
							if (ite.value == this.value[1]) {
								data.city = ite.label
								ite.childList.forEach(iteZone => {
									if (iteZone.value == this.value[2])
										data.area = iteZone.label
								})
							}
						})
					}
				})
				this.optionsBankAddress.forEach(item => {
					if (item.value === this.valueBank[0]) {
						data.bankProv = item.label
						item.children.forEach(ite => {
							if (ite.value == this.valueBank[1]) {
								data.bankCity = ite.label
							}
						})
					}
				})
				console.log(data, '提交保存信息')
				this.loading = true
				this.dataApi.ajax('markerWithdrawRegistration', data, res => {
					if (res.responseType === 'S') {
						this.showMsg('保存成功')
						this.loading = false
						this.$router.push('/user/creator_detail/' + this.$route.params.id)
					}
				});
			},
			agree() {
				console.log('同意')
				this.dataApi.ajax('platformMarkerRegistration', {
					storeId: this.form.storeId,
					applyStat: 2,
				}, res => {
					if (res.responseType === 'S') {
						this.showMsg("通过成功")
						this.fetchData();
					}
				})
			},
			reloadSubmit() {
				console.log('重新提交')
				this.agree()
			},
			// 拒绝
			submit() {
				console.log('拒绝')
				this.dataApi.ajax('platformMarkerRegistration', {
					storeId: this.form.storeId,
					applyStat: 1,
					refuseReason: this.refuseReason
				}, res => {
					if (res.responseType === 'S') {
						this.showMsg("拒绝成功")
						this.dialogVisible = false;
						this.fetchData()
					}
				})
			},
		}
	}
</script>

<style>
	.editUserInfo {
		display: flex;
		justify-content: flex-start;
		padding: 20px;
		border: 1px solid #DCDCDC;
		margin-top: 20px;
	}
</style>
